<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view class="box1">
          <view style="display: flex">
            <!-- <text class="cha" v-if="showlist" @click="showUs">×</text> -->
            <!-- <image
              :src="list.process_photos_path"
              mode="aspectFill"
              class="image"
              v-if="showlist"
            ></image> -->
            <u-upload
              :fileList="fileList"
              :previewFullImage="true"
              @afterRead="afterRead($event, 'fileList')"
              @delete="deleteMedia($event, 'fileList')"
              class="upload"
              multiple
              width="100px"
              height="100px"
              :maxCount="1"
            ></u-upload>
            <view class="text">
              <view class="qutu"
                >区域名称: <span>{{ list.area }}</span></view
              >
              <view class="qutu"
                >样板名称: <span>{{ list.template_name }}</span></view
              >
              <view class="qutu"
                >工序拆分: <span>{{ list.process_split }}</span></view
              >
            </view>
          </view>
        </view>
        <view class="box">
          <view
            style="
              padding-bottom: 10px;
              box-shadow: 0 0 20rpx 10rpx rgba(##f2eff2, 0.17);
            "
          >
            <view class="name">图纸要求</view>
            <view class="body">
              <view class="item">
                <view class="name">{{ list.drawing_require }}</view>
              </view>
            </view>
          </view>
          <view
            style="
              padding-bottom: 10px;
              box-shadow: 0 0 20rpx 10rpx rgba(##f2eff2, 0.17);
            "
          >
            <view class="name">施工验收规范</view>
            <view class="body">
              <view class="item">
                <view class="name">{{ list.acceptance_specification }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="preservation">
          <u-button
            class="preservabtn"
            type="primary"
            text="保存"
            @click="submit"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { uploadUrl } from "@/baseUrl.js";
import {
  getRecordInfoApi,
  updateEngineeringPicture,
} from "@/api/statistics.js";

export default {
  data() {
    return {
      id: "",
      name: "",
      file_id: "",
      file_path: "",
      list: [],
      showlist: false,
      fileList: [],
    };
  },
  methods: {
    async getRecordInfoApi() {
      uni.showLoading({
        mask: true,
      });
      let j = await getRecordInfoApi({
        record_id: this.id,
      });
      if (j.data.code == 1) {
        this.list = j.data.data;
        console.log(this.list);
        // if (
        //   this.list.process_photos_path == null ||
        //   this.list.process_photos_path == ""
        // ) {
        //   this.showlist = false;
        // } else {
        //   this.showlist = true;
        // }
        let arr = {};
        if (
          this.list.process_photos_path != null &&
          this.list.process_photos_path != ""
        ) {
          arr.url = this.list.process_photos_path;
          arr.file_path = this.list.process_photos_path;
          arr.file_id = this.process_photos;
          this.fileList.push(arr);
          console.log(this.fileList, 12355565);
        }
      }
      uni.hideLoading();
    },

    showUs() {
      console.log(111);
      this.showlist = false;
      this.list.process_photos_path = "";
    },
    // 删除图片
    deleteMedia(event) {
      this[`fileList`].splice(event.index, 1);
      this.file_id = "";
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        this.file_id = result.data.file_id;
        this.file_path = result.data.file_path;
        console.log(result);
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.data.file_id,
            file_path: result.data.file_path,
          })
        );
        fileListLen++;
      }
      console.log(this.file_id, this.id);
    },

    //提交图片
    async submit() {
      const res = await updateEngineeringPicture({
        id: this.id,
        process_photos: this.file_id,
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: "保存成功",
          duration: 1000,
          icon: "success",
        });
        uni.hideLoading();
        this.Back();
      } else {
        uni.showToast({
          title: "保存失败，请重试",
          duration: 1000,
          icon: "error",
        });
        uni.hideLoading();
      }
      console.log(res.data, 88888);
    },

    //返回上一级界面
    Back() {
      uni.$emit("refreshData");
      uni.navigateBack({
        delta: 1,
      });
    },

    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: uploadUrl,
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data));
            }, 1000);
          },
        });
      });
    },
  },
  onLoad(e) {
    this.id = e.id;
    this.getRecordInfoApi();
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fafbfd;
}
.section-0 {
  width: 100%;
  background-color: #3a5df5;
  .section-body {
    width: 100%;
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-bottom: 50rpx;
    padding-top: 50rpx;
    background-color: #ffffff;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;
    box-sizing: border-box;
    .box {
      width: 100%;
      border-radius: 29rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-top: 20rpx;
      .name {
        font-size: 29rpx;
        color: #3664ff;
        font-weight: bold;
        padding: 20rpx 0 20rpx 40rpx;
      }
      .body {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        background-color: #efefef;
        margin-bottom: 20rpx;
        @include clear;
        height: 288rpx;
        overflow-y: auto;
        .item {
          width: auto;
          height: 60rpx;
          @include clear();
          .name {
            float: left;
            width: calc(100% - 24rpx - 40rpx);
            font-size: 26rpx;
            font-weight: 300;
            padding: 15rpx 0;
            font-stretch: normal;
            line-height: 30rpx;
            font-stretch: normal;
            color: #827f82;
            letter-spacing: 1px;
            margin-left: 20rpx;
          }
        }
      }
    }
    .box1 {
      width: 100%;
      border-radius: 29rpx;
      box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
      margin-top: 20rpx;
      .image {
        width: 192rpx;
        height: 192rpx;
        padding: 24rpx;
      }
      .upload {
        width: 192rpx;
        height: 192rpx;
        padding: 24rpx;
        // ::v-deep .u-upload__button {
        //   width: 100px !important;
        //   height: 100px !important;
        // }
      }
      .cha {
        position: absolute;
        left: 242rpx;
        top: 53rpx;
        z-index: 99;
        font-size: 52rpx;
        color: red;
      }
      .u-upload__button {
        width: 192rpx;
        height: 192rpx;
        padding: 24rpx;
      }
      .text {
        position: absolute;
        left: 301rpx;
        top: 63rpx;
        .qutu {
          width: 384rpx;
          font-size: 25rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #5b5b5e;
          margin: 35rpx 0 0 0;
        }
        .qutu span {
          color: #a3a3a3;
          margin-left: 20rpx;
        }
      }
    }
  }
}
.preservation {
  width: 100%;
  height: 115rpx;
  position: fixed;
  bottom: 0rpx;
  right: 0;
  padding-top: 21rpx;
  box-shadow: 0 0 10rpx 10rpx rgba(#bcbcb5, 0.17);
  .preservabtn {
    width: 75%;
    margin: auto;
  }
}
</style>
